<template>
	<view class="fault">
		<scroll-view class="scroll-view_list" scroll-y="true">
			<view class="mian_content">
				<view class="fault_tem" v-if="faultDetail?.content">
					<text class="title_top">故障内容</text>
					<view class="content_c">
						<p class="text">{{faultDetail?.content}}</p>
						<view class="img-pic">
							<image v-for="(item,index) in faultDetail?.path" @click="lookImg(faultDetail?.path)"
								:key="index" :src="item" mode="aspectFill" class="img_path"></image>
						</view>
					</view>
				</view>

				<view class="fault_tem" v-if="faultDetail?.solution">
					<text class="title_top">解决方法</text>
					<view class="content_c">
						<p class="text">{{faultDetail?.solution}}</p>
						<view class="img-pic">
							<image v-for="(item,index) in faultDetail?.solutionPath"
								@click="lookImg(faultDetail?.solutionPath)" :key="index" :src="item" mode="aspectFill"
								class="img_path"></image>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>


</template>

<script setup lang="ts">
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import store from '@/store/index.js'
	import apiFault from '@/util/api/fault.js'
	const faultDetail = ref(null) //详情
	onLoad((e) => {
		getfaultTypeDetail(e.id)
	})
	const getfaultTypeDetail = async (id) => {
		await apiFault.getUserMobileFaultDetail(id).then(res => {
			if (res.code == 20000) {
				faultDetail.value = res.data.row

			}
		})
	}
	const activeNames = ref([]);
	// 预览图片
	const lookImg = (urls) => {
		uni.previewImage({
			urls: urls,
		})
	}
</script>

<style lang="scss" scoped>
	.fault {
		background-color: #f6f7fa;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		overflow-y: hidden;
		display: flex;
		flex-direction: column;

		.scroll-view_list {
			height: 100%;
			flex: 1;

			::-webkit-scrollbar {
				display: none;
				width: 0 !important;
				height: 0 !important;
				-webkit-appearance: none;
				background: transparent;
				color: transparent;
			}

			.mian_content {
				padding-bottom: 200rpx;

			}
		}


		.fault_tem {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding: 30rpx;

			.title_top {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}

			.content_c {
				background-color: #fff;
				width: 100%;
				border-radius: 10rpx;
				padding: 24rpx;
				box-sizing: border-box;

				.text {
					text-indent: 1em;
					width: 100%;
					white-space: pre-wrap;
					font-size: 24rpx;
					word-break: break-all;
					word-wrap: break-word;
					margin-bottom: 20rpx;
				}

				.img-pic {
					display: flex;
					flex-wrap: wrap;
					gap: 12rpx;

					.img_path {
						width: 120rpx;
						height: 120rpx;
						border: 1rpx solid #eee;
					}
				}
			}
		}
	}
</style>